<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统监控 - 游乐园信息管理系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/components.css">
</head>

<body>
    <header class="header">
        <div class="header-container">
            <button class="mobile-menu-btn">☰</button>
            <div class="location">
                <span class="location-icon">📍</span>
                <span class="location-text">Beijing, China</span>
            </div>
            <nav class="main-nav">
                <!-- 系统监控页面专用 - 导航项目已移除 -->
            </nav>
            <div class="user-actions">
                <a href="login.html" class="login-btn">登录使用更多功能</a>
                <a href="personal-center-monitor.html" class="user-icon">👤</a>
            </div>
        </div>
    </header>

    <aside class="sidebar">
        <div class="sidebar-header">
            <h3>项目详情</h3>
            <button class="collapse-btn" onclick="toggleSidebar()">◀</button>
        </div>
        <ul class="project-list">
            <li><a href="system-monitor.html" class="active">
                    <span class="project-icon">📊</span>
                    <span class="project-text">系统监控</span>
                </a></li>
            <li><a href="vr-cinema-monitor.html">
                    <span class="project-icon">🥽</span>
                    <span class="project-text">VR影院</span>
                </a></li>
            <li><a href="food-street-monitor.html">
                    <span class="project-icon">🍽️</span>
                    <span class="project-text">美食街</span>
                </a></li>
            <li><a href="traffic-stats.html">
                    <span class="project-icon">📈</span>
                    <span class="project-text">出入口客流统计</span>
                </a></li>
            <li><a href="personal-center-monitor.html">
                    <span class="project-icon">👤</span>
                    <span class="project-text">个人中心</span>
                </a></li>
        </ul>

        <div class="latest-notice">
            <h4>最新通知</h4>
            <div class="notice-content">
                <p>• VR影院维护完成，现已开放</p>
                <p>• 今日游客量较大，建议错峰游玩</p>
                <p>• 水上项目需预约救生衣</p>
                <p>• 夜间灯光秀今晚8点开始</p>
            </div>
        </div>
    </aside>

    <main class="main-content">
        <!-- 系统监控 -->
        <section class="section" id="systemMonitorSection">
            <h4>📊 系统监控</h4>
            
            <!-- 项目心跳状态 -->
            <div class="monitor-section">
                <h5>项目心跳状态</h5>
                <div class="heartbeat-grid">
                    <div class="heartbeat-card" id="rollerCoasterHeartbeat">
                        <div class="project-info">
                            <span class="project-icon">💦</span>
                            <span class="project-name">激流勇进</span>
                        </div>
                        <div class="heartbeat-status">
                            <span class="status-indicator" id="rollerCoasterStatus">正常</span>
                            <span class="last-heartbeat" id="rollerCoasterTime">刚刚</span>
                        </div>
                    </div>
                    
                    <div class="heartbeat-card" id="vrCinemaHeartbeat">
                        <div class="project-info">
                            <span class="project-icon">🥽</span>
                            <span class="project-name">VR影院</span>
                        </div>
                        <div class="heartbeat-status">
                            <span class="status-indicator" id="vrCinemaStatus">正常</span>
                            <span class="last-heartbeat" id="vrCinemaTime">刚刚</span>
                        </div>
                    </div>
                    
                    <div class="heartbeat-card" id="restAreaHeartbeat">
                        <div class="project-info">
                            <span class="project-icon">🪑</span>
                            <span class="project-name">休息区</span>
                        </div>
                        <div class="heartbeat-status">
                            <span class="status-indicator" id="restAreaStatus">正常</span>
                            <span class="last-heartbeat" id="restAreaTime">刚刚</span>
                        </div>
                    </div>
                    
                    <div class="heartbeat-card" id="foodStreetHeartbeat">
                        <div class="project-info">
                            <span class="project-icon">🍽️</span>
                            <span class="project-name">美食街</span>
                        </div>
                        <div class="heartbeat-status">
                            <span class="status-indicator" id="foodStreetStatus">正常</span>
                            <span class="last-heartbeat" id="foodStreetTime">刚刚</span>
                        </div>
                    </div>
                    
                    <div class="heartbeat-card" id="shuttleHeartbeat">
                        <div class="project-info">
                            <span class="project-icon">🚌</span>
                            <span class="project-name">摆渡车</span>
                        </div>
                        <div class="heartbeat-status">
                            <span class="status-indicator" id="shuttleStatus">正常</span>
                            <span class="last-heartbeat" id="shuttleTime">刚刚</span>
                        </div>
                    </div>
                    
                    <div class="heartbeat-card" id="entranceExitHeartbeat">
                        <div class="project-info">
                            <span class="project-icon">🚪</span>
                            <span class="project-name">出入口</span>
                        </div>
                        <div class="heartbeat-status">
                            <span class="status-indicator" id="entranceExitStatus">正常</span>
                            <span class="last-heartbeat" id="entranceExitTime">刚刚</span>
                        </div>
                    </div>
                    
                </div>
            </div>

            <!-- 休息区座位占用 -->
            <div class="monitor-section">
                <h5>休息区座位占用情况</h5>
                <div class="seating-grid">
                    <div class="seating-card">
                        <div class="seating-info">
                            <span class="seating-name">A区休息区</span>
                            <span class="seating-capacity">容量: 100人</span>
                        </div>
                        <div class="occupancy-bar">
                            <div class="occupancy-fill" id="areaAOccupancy" style="width: 0%"></div>
                        </div>
                        <div class="occupancy-text" id="areaAText">占用: 0/100 (0%)</div>
                    </div>
                    
                    <div class="seating-card">
                        <div class="seating-info">
                            <span class="seating-name">B区休息区</span>
                            <span class="seating-capacity">容量: 100人</span>
                        </div>
                        <div class="occupancy-bar">
                            <div class="occupancy-fill" id="areaBOccupancy" style="width: 0%"></div>
                        </div>
                        <div class="occupancy-text" id="areaBText">占用: 0/100 (0%)</div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 危险信号弹窗 -->
    <div class="alert-modal" id="alertModal" style="display: none;">
        <div class="alert-content">
            <div class="alert-header">
                <span class="alert-icon">⚠️</span>
                <span class="alert-title">危险信号警告</span>
            </div>
            <div class="alert-body">
                <p id="alertMessage">系统检测到异常，请立即处理！</p>
            </div>
            <div class="alert-footer">
                <button class="btn btn-primary" onclick="closeAlert()">确认</button>
            </div>
        </div>
    </div>

    <script src="js/api-service.js"></script>
    <script src="js/main.js"></script>
    <script src="js/visitor-statistics.js"></script>
    <script src="js/system-monitor.js"></script>
</body>

</html>
